<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<body>
<ui:composition template="/templates/Plantilla.xhtml">
 <ui:define name="content">
  <h:form id="form">
  	<h3> Gestión de Producto</h3>
	<p:separator/>
	<p:dataTable id="tblProducto" var="p" value="#{productoList.productos}" rowKey="#{p.productoId}"
		 			paginator="true" rows="10"
					selection="#{productoList.productoSelected}"
					emptyMessage="No se encontró ningun Producto..."
					selectionMode="single">
  		<f:facet name="header">Listado de Productos</f:facet>  		
  		<p:ajax event="rowSelect" update=":form:display" oncomplete="productoDialog.show()" />
		<p:column>
			<!-- column header -->
			<f:facet name="header">
				<h:commandButton 
				image="#{resource['images:plus-16-ns.png']}" title ="Nuevo Producto" 
				action="#{productoList.nuevoProducto}">			  
				</h:commandButton>
			</f:facet>
	  	</p:column>
		<p:column sortBy ="#{p.productoId}">
			<!-- column header -->
			<f:facet name="header">Codigo</f:facet>
			<!-- row record -->
				#{p.productoId}			    			
		</p:column>
		<p:column sortBy ="#{p.nombre}">
			<f:facet name="header">Nombre</f:facet>
			#{p.nombre}
		</p:column>
		<p:column>
			<f:facet name="header">Precio</f:facet>
			$ #{p.precio}
		</p:column>
		<p:column sortBy ="#{p.tipoProducto.nombre}">
			<f:facet name="header">Tipo</f:facet>
			#{p.tipoProducto.nombre}
		</p:column>
		
	</p:dataTable>
	<p:dialog header="Detalle de Producto" widgetVar="productoDialog" resizable="false"  
              width="400" showEffect="explode">  
  
        <h:panelGrid id="display" columns="2" cellpadding="4">  
            				
			<h:outputLabel value="NOMBRE:"/>
			<h:outputLabel value= "#{productoList.productoSelected.nombre}"/>
			
			<h:outputLabel value="PRECIO:"/>
			<h:outputLabel value="#{productoList.productoSelected.precio}"/>
			
			<h:outputLabel value="TIPO DE PRODUCTO:"/>
			<h:outputLabel value="#{productoList.productoSelected.tipoProducto.nombre}"/>
			
			<h:outputLabel value="DESCRIPCION:"/>
			<h:outputLabel value="#{productoList.productoSelected.descripcion}"/>
			
        </h:panelGrid>
        <p:panel style="text-align: center" >
				<p:commandButton type="submit" action="#{productoList.prepareEdit}" 
    				icon="ui-icon-newwin" value="Modificar"
    				title = "Editar Prodcuto" oncomplete="productoDialog.hide()">			    					
   				</p:commandButton>
   				<p:commandButton icon="ui-icon-trash" value="Eliminar"
    				title = "Eliminar Producto" oncomplete="productoDialog.hide()"
    				onclick="dlg2.show()">			    					
   				</p:commandButton>
   				<p:commandButton type="submit"  
    				icon="ui-icon-close" value="Salir"
    				title = "Salir"
    				oncomplete="productoDialog.hide()">			    					
   				</p:commandButton>
		</p:panel>  
    </p:dialog>
    <p:dialog id="modalDialog" header="Eliminacion de Registro" widgetVar="dlg2" modal="true" resizable="false">  
    	
		  	<h:outputLabel value="¿Desea Eliminar el Producto?" />
			<p:separator/>	  
		    <p:commandButton id="confirm" value="Si" oncomplete="dlg2.hide()"  
		                  actionListener="#{productoList.eliminarProducto()}" update="tblPersonal" ajax="false"/>  
		    <p:commandButton id="decline" value="No" onclick="dlg2.hide()" type="button" ajax="false"/>
	</p:dialog>  
	</h:form>
</ui:define>
</ui:composition>
</body>
</html>